<template>
	<div class="main">
		<div class="container atte-info">
			<div class="title">
				<div>
					<span class="text-h1">秒杀平台后台管理系统</span>
				</div>
				<div>
					<span class="text-h2">Welcome to the seckill background management system </span>
				</div>
			</div>
			<div class="atte-body">
				<div class="leftContent fl">
					<div class="atte-img">
						<div><span class="text-h2">欢迎登录</span></div>
					</div>
					<img src="@/assets/images/background/login-bg.jpg" height="600px">
				</div>
				<div class="rightContent fr">
					<div class="top">
						<div class="header">
							登录
						</div>
					</div>
					<div class="body">
						<el-form ref="ruleForm" :rules="loginValidate" :model="adminFrom" style="width: 300px;">
							<el-form-item prop="account">
								<md-input v-model="adminFrom.account" icon="el-icon-user" name="account"
									placeholder="请输入账号">
									账号
								</md-input>
							</el-form-item>
							<el-form-item prop="password">
								<md-input v-model="adminFrom.password" icon="el-icon-lock" name="password" type="password"
									placeholder="请输入密码">
									密码
								</md-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="login" style="width: 300px; margin-top: 15px;"
									:loading="loading">登
									录</el-button>
							</el-form-item>
						</el-form>
					</div>
					<div class="tips">
						<span>账号：10001 密码：123456 -by 炫子</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import MdInput from "@/components/MDInput"
export default {
	components: {
		MdInput
	},
	data() {
		return {
			adminFrom: {},
			loading: false,
			loginValidate: {
				account: [
					{ required: true, message: '请输入账户名', trigger: 'blur' },
					{ min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
				]
			}
		}
	},
	methods: {
		login() {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					this.loading = true;
					this.$store.dispatch('admin/login', this.adminFrom).then(() => {
						this.$router.push({
							path: this.redirect || '/'
						})
					}).catch(() => {
						this.loading = false;
					});
				} else {
					return false;
				}
			});
		}
	}
}
</script>

<style scoped>
.main {
	height: 100vh;
	position: relative;
	background-image: url('@/assets/images/background/login-bg.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.main:after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: inherit;
	filter: blur(2px);
	z-index: 2;
}

.atte-info {
	position: absolute;
	left: 50%;
	top: 38%;
	transform: translate(-50%, -50%);
	width: 1200px;
	height: 500px;
	/* background: white; */
	text-align: center;
	z-index: 11;
}

.atte-body {
	text-align: left;
	box-shadow: 2px 2px 12px rgb(45, 58, 75);
	background: white;
	width: 1200px;
	height: 550px;
}

.title {
	color: white;
}

.title .text-h1 {
	display: inline-block;
	font-size: 36px;
	font-weight: 700;
	text-shadow: 2px 2px 4px rgb(45, 58, 75);
	padding-bottom: 5px;
}

.title .text-h2 {
	display: inline-block;
	font-size: 14px;
	text-shadow: 2px 2px 4px rgb(45, 58, 75);
	padding-bottom: 15px;
}

.leftContent {
	position: relative;
	width: 800px;
	height: 100%;
	overflow: hidden
}

.leftContent img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 10;
}

.leftContent .atte-img {
	position: absolute;
	left: 35px;
	top: 35px;
	color: white;
	z-index: 20;

}

.leftContent .atte-img .text-h2 {
	font-size: 22px;
	display: inline-block;
	padding-top: 5px;
	-webkit-text-stroke: 1px rgba(45, 58, 75, 0.5);

	padding-bottom: 5px;
	font-weight: 700;
}

.rightContent {
	width: calc(100% - 800px);
	/* background: red; */
	height: 100%;
}

.rightContent .top {
	margin-top: 24px;
	margin-bottom: 24px;
	text-align: center;
	position: relative;
}

.rightContent .top .header {
	height: 44px;
	line-height: 44px;
	font-size: 33px;
	color: rgba(0, 0, 0, .85);
	font-family: FZZZHONGJW--GB1-0;
	font-weight: 600;
}

.rightContent .body {
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 60px 0;
	min-width: 400px;
	width: 400px;
}

/* .el-form-item {
  padding-top: 5px;
  padding-bottom: 5px;
} */


.rightContent .body .lite {
	padding-left: 5px;
	padding-right: 5px;
}

.rightContent .bottom {
	padding: 12px;
}

.captchaImg img {
	width: 140px;
}

.el-input-group__prepend {
	background-color: white;
	padding: 0;
}

.tips{
	color: gray;
	text-align: center;
}
</style>